<template>
  <div class="main-content">
    <div style="width: 65%; margin: 20px auto">
      <div style="text-align: center">
        <el-button type="success">{{ scoreData.type === 'VIDEO'? '视频课' : '图文课' }}</el-button>
        <span style="font-size: 20px; font-weight: bold; margin-left: 20px; color: #333">{{scoreData.name}}</span>
      </div>

      <div style="text-align: center; margin-top: 15px">
        <span style="color: #12b127" v-if="scoreData.price > 0">学习该课程需要 {{ scoreData.price }} 积分</span>
        <span style="color: red" v-else>公开课</span>
        <span style="color: #666666; margin-left: 50px">发布时间：{{ scoreData.time }}</span>
      </div>

      <!--   课程保密区域   -->
      <div>
        <div style="font-size: 18px; margin: 10px 0">课程资料</div>
        <div v-if="scoreData.price === 0">
          <video :src="scoreData.video" v-if="scoreData.type === 'VIDEO'" controls style="width: 65%; height: 400px"></video>
          <div style="margin-top: 10px">资料链接：<a :href="scoreData.file" target="_blank">{{ scoreData.file }}</a></div>
        </div>
        <div v-else>
          <span style="color: red; margin-right: 20px">该课程属于付费课程，购买后可解锁</span>
          <el-button type="warning" size="mini">购买课程</el-button>
        </div>
      </div>

      <!--   课程介绍区域   -->
      <div style="margin-top: 20px">
        <div style="font-size: 18px">课程介绍</div>
        <div style="margin-top: 10px" v-html="scoreData.content" class="w-e-text w-e-text-container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default {
  data(){
    return{
      user: JSON.parse(localStorage.getItem("xm-user")),
      scoreId: this.$route.query.id,
      scoreData: {}
    }
  },
  created() {
    this.loadScore()
  },
  methods:{
    loadScore(){
      this.$request.get('score/selectById/' + this.scoreId).then(res => {
        if(res.code === '200'){
          this.scoreData = res.data
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
